<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
    <style>
        body {
            background-color: bisque;
        }

        #app {
            width: 400px;
            height: 200px;
            border: solid 1px black;
            margin: 100px auto;
            text-align: center;
            background-color: black;
        }

        .nameDiv {
            margin-top: 10px;
            font-size: 70px;
            font-family: 楷体;
            background-color: black;
            color: yellow;

        }

        button {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="nameDiv">

            <img src="img/22.jpg" width="100px" id="actor" alt="">
            <span id="name">XXX</span>
        </div>

        <div>
            <button id="beginBtn" onclick="begin()"> start </button>
            <button onclick="end()"> end </button>
        </div>
    </div>
    </div>

</body>
<script>
    let studentArray = [{
            "id": 1,
            "name": "坤",
            img: "/img/11.jpg"

            // Image:"20231213224954.jpg"
        },
        {
            "id": 2,
            "name": "凡",
            img: "/img/22.jpg"
            // Image:"20231213224954.jpg"
        },
        {
            "id": 3,
            "name": "峰",
            img: "/img/11.jpg"
            // Image:"11.jpg"
        },
        {
            "id": 4,
            "name": "希",
            img: "/img/22.jpg"

            // Image:"11.jpg"

        },



    ];
    let randomNameTasK;

    function begin() {
        // console.log("eee");

        // setInterval(函数，毫秒数);

        randomNameTasK = setInterval(
            () => {
                let RandomNum = Math.random() * studentArray.length;
                let RandomIndex = Math.floor(RandomNum);
                let stuRandomOBJ = studentArray[RandomIndex];
                // console.log(stuRandomOBJ.name);
                document.getElementById("name").innerText = stuRandomOBJ.name;
                document.getElementById("actor").src = stuRandomOBJ.img;

            }, 1000
        );

        // randomNameTasK = setInterval(function () {
        //     let RandomNum = Math.random() * studentArray.length;
        //     let RandomIndex = Math.floor(RandomNum);
        //     let stuRandomOBJ = studentArray[RandomIndex];
        //     // console.log(stuRandomOBJ.name);
        //     document.getElementById("name").innerText = stuRandomOBJ.name;
        //     document.getElementById("actor").src = stuRandomOBJ.img;
        // }, 1000);

        //禁用点击按钮,避免多次实现
        document.querySelector("#beginBtn").disabled = true;

        function end() {

            //    clearInterval(任务的名称/变量);
            clearInterval(randomNameTasK);
            document.querySelector("#beginBtn").disabled = true;

        }
    }
</script>

</html>